<template>
  <div id="SaleList">
    <!-- 数据更新时间 -->
    <div class="updateTimewl" v-if="rankKind == '全网销量榜' && updateTime != ''">
      数据更新时间：
      <span style="color:#888">
        {{
        timestamp(updateTime, "Y-M-D h:m")
        }}
      </span>
    </div>
    <!-- 抖音销量榜接口抓不到数据先隐藏 -->
    <!-- <div v-if="rankKind == '抖音销量榜'" class="updateTimewl">
      数据更新时间：
      <span style="color:#888" v-if="dateRank01.split('?')[0] == '日榜'">每天10:00持续更新前日数据</span>
      <span style="color:#888" v-if="dateRank01.split('?')[0] == '周榜'">每周二10:00持续更新上一周数据</span>
      <span style="color:#888" v-if="dateRank01.split('?')[0] == '月榜'">每月2号14:00持续更新上一个月数据</span>
    </div> -->
    <!-- 榜单 -->
    <Radiogroup02
      :radio_values="radioValues"
      v-model="rankKind"
      title="榜单"
      class="addPadding"
      isSearch="1"
    />
    <!-- 商品种类 -->
    <category_goods v-model="checkedDatasJoe" />

    <!-- 商品来源 全部= -1 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5-->
    <radio_group :radio_values="sourceList" v-model="source" title="商品来源" class isSearch="1" />
    <section class style="margin-top:10px" v-if="timeData">
      <!-- 时间 -->
      <Timeoptions01
        v-model="dateRank01"
        :radio_values="['日榜', '周榜', '月榜']"
        :timing="$global.timing"
        class="timeOptions"
        v-if="rankKind == '全网销量榜'"
      />
      <talentSaleDayTime
        v-model="dateRank01"
        :radio_values="['日榜', '周榜', '月榜']"
        :timeData="timeData"
        class="timeOptions"
        v-if="rankKind == '抖音销量榜'"
      />
      <!-- 搜索 -->
      <section class="search01">
        <div class="searchBox">
          <el-input v-model="keyword" placeholder=" 请输入关键词在排行榜中搜索" @keyup.enter.native="toSearch"></el-input>
          <div class="imgBox" @click="toSearch">
            <!-- <img src="@/assets/wang/talentCompare/search.png" /> -->
          </div>
        </div>
      </section>
      <div class="btn_group">
        <button @click="generatorImage">
          <span></span>分享
        </button>
        <button @click="export_data">
          <span></span>导出
        </button>
      </div>
    </section>
    <section ref="capture">
      <ul
        class="fixedThead"
        ref="fixedThead"
        :class="{ isShow: isFixed }"
        :style="showLeft == true ? 'left:222px' : 'left:98px'"
      >
        <li tc>排名</li>
        <li>商品</li>
        <li tc>售价</li>
        <li tc>佣金率</li>
        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 3)"
          v-if="
            order_by == 'desc' &&
              sort != '3' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          关联视频数
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '3' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          关联视频数
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- 预留 -->
        <li tc v-if="this.dateRank01.split('?')[0] == '月榜'">关联视频数</li>
        <!--  -->

        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 4)"
          v-if="
            order_by == 'desc' &&
              sort != '4' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          关联直播数
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '4' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          关联直播数
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- 预留 -->
        <li tc v-if="this.dateRank01.split('?')[0] == '月榜'">关联直播数</li>
        <!--  -->

        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '全网销量榜'
          "
        >
          日访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '全网销量榜'
          "
        >
          日访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '全网销量榜'
          "
        >
          全网日销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '全网销量榜'
          "
        >
          全网日销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          周访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          周访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          全网周销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          全网周销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          月访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          月访客量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- 预留 -->
        <!-- y预留 -->
        <li tc v-if="dateRank01.split('?')[0] == '月榜' && rankKind == '全网销量榜'">月访客量</li>
        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          全网月销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '全网销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          全网月销量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- y预留 -->
        <li tc v-if="dateRank01.split('?')[0] == '月榜' && rankKind == '全网销量榜'">全网月销量</li>

        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '抖音销量榜'
          "
        >
          抖音日浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '抖音销量榜'
          "
        >
          抖音日浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '抖音销量榜'
          "
        >
          抖音日订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '日榜' &&
              rankKind == '抖音销量榜'
          "
        >
          抖音日订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音周浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音周浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音周订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '周榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音周订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>

        <li
          tc
          @click="sort_fun(false, 2)"
          style="  cursor: pointer;"
          v-if="
            order_by == 'desc' &&
              sort != '2' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音月浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '2' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音月浏览量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- 预留 -->
        <li tc v-if="dateRank01.split('?')[0] == '月榜' && rankKind == '抖音销量榜'">抖音月浏览量</li>
        <li
          tc
          style="  cursor: pointer;"
          @click="sort_fun(false, 1)"
          v-if="
            order_by == 'desc' &&
              sort != '1' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音月订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <li
          tc
          v-if="
            order_by == 'desc' &&
              sort == '1' &&
              dateRank01.split('?')[0] == '月榜' &&
              rankKind == '抖音销量榜' &&
              this.dateRank01.split('?')[0] != '月榜'
          "
        >
          抖音月订单量
          <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
          <img src="@/assets/meng/no_down_up.png" v-else />
        </li>
        <!-- 预留 -->
        <li tc v-if="dateRank01.split('?')[0] == '月榜' && rankKind == '抖音销量榜'">抖音月订单量</li>

        <li tc>操作</li>
      </ul>
      <table class="table" ref="capture ">
        <thead>
          <tr>
            <th class="rankThWl">排名</th>
            <th>商品</th>
            <!-- <th>关联达人数</th> -->
            <th>售价</th>
            <th>佣金率</th>
            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 3)"
              v-if="
                order_by == 'desc' &&
                  sort != '3' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              关联视频数
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '3' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              关联视频数
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '3'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- 预留 -->
            <th v-if="this.dateRank01.split('?')[0] == '月榜'">关联视频数</th>
            <!--  -->

            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 4)"
              v-if="
                order_by == 'desc' &&
                  sort != '4' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              关联直播数
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '4' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              关联直播数
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '4'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- 预留 -->
            <th v-if="this.dateRank01.split('?')[0] == '月榜'">关联直播数</th>
            <!--  -->

            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '全网销量榜'
              "
            >
              日访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '全网销量榜'
              "
            >
              日访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '全网销量榜'
              "
            >
              全网日销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '全网销量榜'
              "
            >
              全网日销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              周访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              周访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              全网周销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              全网周销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              月访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              月访客量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- 预留 -->
            <!-- y预留 -->
            <th
              v-if="
                dateRank01.split('?')[0] == '月榜' && rankKind == '全网销量榜'
              "
            >月访客量</th>
            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              全网月销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '全网销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              全网月销量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- y预留 -->
            <th
              v-if="
                dateRank01.split('?')[0] == '月榜' && rankKind == '全网销量榜'
              "
            >全网月销量</th>

            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '抖音销量榜'
              "
            >
              抖音日浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '抖音销量榜'
              "
            >
              抖音日浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '抖音销量榜'
              "
            >
              抖音日订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '日榜' &&
                  rankKind == '抖音销量榜'
              "
            >
              抖音日订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音周浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音周浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音周订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '周榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音周订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>

            <th
              @click="sort_fun(false, 2)"
              style="  cursor: pointer;"
              v-if="
                order_by == 'desc' &&
                  sort != '2' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音月浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '2' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音月浏览量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '2'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- 预留 -->
            <th
              v-if="
                dateRank01.split('?')[0] == '月榜' && rankKind == '抖音销量榜'
              "
            >抖音月浏览量</th>
            <th
              style="  cursor: pointer;"
              @click="sort_fun(false, 1)"
              v-if="
                order_by == 'desc' &&
                  sort != '1' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音月订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <th
              v-if="
                order_by == 'desc' &&
                  sort == '1' &&
                  dateRank01.split('?')[0] == '月榜' &&
                  rankKind == '抖音销量榜' &&
                  this.dateRank01.split('?')[0] != '月榜'
              "
            >
              抖音月订单量
              <img src="@/assets/meng/down_up.png" v-if="order_by == 'desc' && sort == '1'" />
              <img src="@/assets/meng/no_down_up.png" v-else />
            </th>
            <!-- 预留 -->
            <th
              v-if="
                dateRank01.split('?')[0] == '月榜' && rankKind == '抖音销量榜'
              "
            >抖音月订单量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody v-if="dataList.length != 0 && !loading">
          <tr v-for="(item, index) in dataList" :key="'d' + index" :id="!index ? 'tr1' : ''">
            <td>
              <div class="rankwl rankLeftWl" style="align-items: baseline;">
                <!-- 选中来源的时候就手动从1开始排 变动显示-- -->
                <template v-if="source == '全部'">
                  <span class="rankNum">{{ item.rank }}</span>
                  <div
                    v-if="
                      item.rank_incr == 0 ||
                        item.rank_incr > 0 ||
                        item.rank_incr < 0
                    "
                  >
                    <img src="@/assets/wang/goods/up.png" v-if="item.rank_incr > 0" />
                    <img
                      src="@/assets/wang/goods/ping.png"
                      v-if="item.rank_incr == 0"
                      class="pingImg"
                    />
                    <img src="@/assets/wang/goods/ddown.png" v-if="item.rank_incr < 0" />
                    <span
                      class="rankincr"
                      :class="{
                        down: item.rank_incr < 0,
                        ping: item.rank_incr == 0
                      }"
                    >{{ Math.abs(item.rank_incr) }}</span>
                  </div>
                  <span v-else class="new_font">{{ item.rank_incr }}</span>
                </template>
                <template v-if="source != '全部'">
                  <span>{{ 30 * (page - 1) + index + 1 }}</span>
                  <!-- <span style="padding-left: 10px">--</span> -->
                </template>
              </div>
            </td>
            <td>
              <div class="goodsBox" @click="toGoodsDetails(item.pro_id, '0')">
                <img :src="item.logo" class="leftImg" v-errorImg:shop />
                <div class="rightBox">
                  <div>
                    <!-- 来源 -->
                    <div style="margin-right: 5px">
                      <SourceIcon
                        :sourceid="item.source_id"
                        @click="toGoodsDetails(item.pro_id, '0')"
                        class="img1"
                      />
                    </div>
                    <span :class="isShare?'shareState':'initState'">{{ item.title }}</span>
                  </div>
                </div>
              </div>
            </td>
            <td>￥{{ item.price }}</td>
            <td>{{ item.commission_rate>1? '--':formatRate(item.commission_rate, 1) }}</td>
            <td>
              <span v-if="item.aweme_count != 0">{{ format_num(item.aweme_count) }}</span>
              <span v-else>--</span>
            </td>
            <td>
              <span v-if="item.live_count != 0">{{ format_num(item.live_count) }}</span>
              <span v-else>--</span>
            </td>
            <!-- 全网销量榜有增量 抖音销量榜增量先不要 -->
            <td v-if="rankKind == '全网销量榜'">
              <div class="rankwl numBox">
                <span>{{ format_num(item.pv_incr) }}</span>
                <!-- 全网销量榜增量先隐藏 -->
                <!-- <template>
                <div v-if="item.pv_incr_cent != ''">
                  <img
                    src="@/assets/wang/goods/up.png"
                    v-if="item.pv_incr_cent > 0"
                  />
                  <img
                    src="@/assets/wang/goods/ping.png"
                    v-if="item.pv_incr_cent == 0"
                    class="pingImg"
                  />
                  <img
                    src="@/assets/wang/goods/down.png"
                    v-if="item.pv_incr_cent < 0"
                  />
                  <span
                    class="rankincr"
                    :class="{
                      down: item.pv_incr_cent < 0,
                      ping: item.pv_incr_cent == 0,
                    }"
                    >{{ formatRate(item.pv_incr_cent, 1, 1) }}</span
                  >
                </div>
                <span v-else class="placeholder">{{ item.pv_incr_cent }}</span>
                </template>-->
              </div>
            </td>
            <td v-if="rankKind == '全网销量榜'">
              <div class="rankwl numBox">
                <span>{{ format_num(item.sale_incr) }}</span>
                <!-- <div v-if="item.sale_incr_cent != ''">
                  <img
                    src="@/assets/wang/goods/up.png"
                    v-if="item.sale_incr_cent > 0"
                  />
                  <img
                    src="@/assets/wang/goods/ping.png"
                    v-if="item.sale_incr_cent == 0"
                    class="pingImg"
                  />
                  <img
                    src="@/assets/wang/goods/down.png"
                    v-if="item.sale_incr_cent < 0"
                  />
                  <span
                    class="rankincr"
                    :class="{
                      down: item.sale_incr_cent < 0,
                      ping: item.sale_incr_cent == 0,
                    }"
                    >{{ formatRate(item.sale_incr_cent, 1, 1) }}</span
                  >
                </div>
                <span v-else class="placeholder">{{
                  item.sale_incr_cent
                }}</span>-->
              </div>
            </td>
            <td v-if="rankKind == '抖音销量榜'">{{ format_num(item.pv_incr) }}</td>
            <td v-if="rankKind == '抖音销量榜'">{{ format_num(item.sale_incr) }}</td>
            <td>
              <div class="optionBox">
                <button @click="toGoodsDetails(item.pro_id, '0')">查看详情</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="upgradeBox" v-if="!permissions">
        <RankUpgrade class="rankUpgrade" />
      </div>
      <!-- <div class="upgradeBox" v-if="permissions&&!loading&&vipLevel==0">
        <RankUpgrade class="rankUpgrade" />
      </div> -->
      <!-- <p
        class="nothing"
        v-show="
          !loading &&
            permissions &&
            dataList.length < 30 &&
            dataList.length != 0
        "
      >我是有底线的～</p> -->
      <div class="pageBox" v-if="(dataList.length != 0 && !loading) || (!permissions && !loading)">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="count"
          :page-size="30"
          :current-page="page"
          @current-change="PostRankList"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
      <div
        v-loading="loading"
        v-if="loading"
        class="loading"
        element-loading-text="拼命加载中..."
        element-loading-spinner="el-icon-loading"
      ></div>

      <div class="empty addTop" v-show="!loading && dataList.length == 0 && permissions">
        <img src="@/assets/liu/zw.png" />
        <p>暂无数据</p>
      </div>

      <!-- </section> -->
      <!-- 榜单未更新 -->
      <!-- <div class="empty addTop" v-if="isUpdate == false">
        <img src="@/assets/meng/empty.png" />
        <p>每日13:00更新昨日榜单，请稍后查看~</p>
      </div>-->
    </section>
    <!-- 详情弹窗 -->
    <pop v-if="dialog" v-model="dialog" :id="video_id" :index="active_name01" />
  </div>
</template>

<script>
import category_goods from '@/component/category_goods.vue';
import html2canvas from 'html2canvas';
import Radiogroup02 from '@/component/radio_group02.vue';
import Timeoptions01 from '@/component/time_options01.vue';
import talentSaleDayTime from '@/component/talentSaleDayTime.vue';
import pop from '@/pages/meng/video/pop';
import SourceIcon from '@/component/SourceIcon.vue';
import RankUpgrade from '@/component/rankUpgrade.vue';

export default {
  components: {
    Radiogroup02,
    Timeoptions01,
    pop,
    SourceIcon,
    talentSaleDayTime,
    RankUpgrade,
    category_goods
  },
  data() {
    return {
      checkedDatasJoe: {
        //商品类目数据初始数据，新筛选组件用
        parentId: 0,
        childIds: []
      },
      radioValues: [
        // {  //抖音销量榜接口抓不到数据先隐藏
        //   title: '抖音销量榜',
        //   tipWords: [
        //     '抖音订单量：查询周期内该商品在抖音平台的订单量，数据来自抖音官方',
        //     '抖音浏览量：查询周期内该商品在抖音平台的浏览量，数据来自抖音官方',
        //     '关联达人数：查询周期内抖音达人中推广该商品的人数',
        //     '关联视频数：查询周期内抖音作品中关联了该商品的视频数量',
        //     '关联直播数：查询周期内抖音作品中关联了该商品的直播场次',
        //     '售价/佣金率：抖音/淘宝官方提供的商品售价及佣金率'
        //   ]
        // },
        {
          title: '全网销量榜',
          tipWords: [
            '全网销量榜：展示该商品在全网平台（含淘宝、抖音小店等）的销售总量（淘宝商品为近30天的淘宝总销量；小店商品为该商品小店累积总销量）',
            '关联达人数：查询周期内抖音达人中推广该商品的人数',
            '关联视频数：查询周期内抖音作品中关联了该商品的视频数量',
            '日/周/月访客量：商品在查询日/周/月内全网平台的访客数量',
            '全网日/周/月销量：商品在查询日/周/月内的全网平台的销量',
            '售价/佣金率：抖音/淘宝官方提供的商品售价及佣金率'
          ]
        }
      ],
      rankKind: '全网销量榜',
      my_radio01: '全部',
      dateRank01: '日榜',
      dateRank02: '日榜',
      keyword: '',
      goodsKind: '全部',
      dataList: [],
      showVolume: 1, //1 日销量 2 周销量
      page: 1,
      busy: false,
      loading: true,
      dialog: false,
      video_id: '',
      active_name01: 1,
      sourceList: ['全部', '淘宝', '抖音小店', '天猫', '苏宁', '考拉', '京东'],
      source: '全部',
      gender: '不限',
      age: '不限',
      isLive: '',
      rank: -2,
      updateTime: '',
      cancel: null,
      needBuy: false,
      isUpdate: true,
      count: 0,
      page: 1,
      permissions: 1,
      showLeft: true,
      isFixed: false,
      offsetTop: 0,
      order_by: 'desc', //   表格头部排序
      sort: 1, //   表格头部排序
      value04: '全部',
      isOld: false, //是否展示旧分类
      timeData:null,  //日榜周榜月榜数据
      vipLevel: '',
      isShare:false,
    };
  },
  computed: {
    // 全网销量榜
    changeData() {
      // 判断用旧分类还是新分类
      // let dates = this.dateRank01.split('?');
      // if (dates[1]) {
      //   if (dates[0] == '日榜' || dates[0] == '周榜') {
      //     this.isOld = false;
      //   } else {
      //     let minMonth = parseInt(dates[1].split('-')[1]); //获取月榜日期区间最小的月份
      //     this.isOld = minMonth < 8;
      //   }
      // }
      // if (!this.isOld) {
      //   //如果是新分类-重置条件
      //   this.checkedDatasJoe = {
      //     parentId: 0,
      //     childIds: []
      //   };
      // }
      const { goodsKind, gender, age, dateRank01, value04 } = this;
      return {
        goodsKind,
        gender,
        age,
        dateRank01,
        value04
      };
    }
  },
  watch: {
    // dateRank01(a){
    //   console.log('父组件',a);
    // },
    checkedDatasJoe() {
      //新筛选组件用
      // this.resData = [];
      // this.toSearch();
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    // 搜索
    keyword: function (newVal, oldVal) {
      if (newVal == '') {
        this.dataList = [];
        this.page = 1;
        this.PostRankList();
      }
    },
    changeData() {
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    source() {
      //来源
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    rankKind() {
      // 榜单类型
      this.checkedDatasJoe = {
        parentId: 0,
        childIds: []
      };
      this.dateRank01 = '日榜';
      this.dataList = [];
      this.page = 1;
      this.source = '全部';
    },
    '$store.state.left_nav_flag'(old, newOld) {
      this.showLeft = newOld;
      if (newOld == false) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },
  created() {
    this.vipLevel = localStorage.getItem('vipLevel'); //会员等级
    // 因为time_options组件内部已经提交新值，导致v-model的值更改，所以已经执行请求函数
    // this.PostRankList();
    if (this.$route.params.id) {
      // this.goodsKind = this.$route.params.id;
      this.rankKind = this.$route.params.id;
    }
    if (this.$route.params.index) {
      this.dateRank01 = this.$route.params.index;
    }
    this.getTimeData();
  },
  mounted() {
    this.showtabs();
    window.addEventListener('scroll', this.initHeight);
    window.addEventListener('resize', () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
    });
  },

  methods: {
    getTimeData(){
      this.$axios.get('/api/product/GetRankDates').then((res)=>{
        if(!res.data.code){
          this.timeData = res.data.data;
        }
      });
    },
    //   表格头部排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.order_by = 'asc';
      } else {
        this.order_by = 'desc';
      }
      switch (parm02) {
        case 1:
          this.sort = 1;
          break;
        case 2:
          this.sort = 2;
          break;
        case 3:
          this.sort = 3;
          break;
        case 4:
          this.sort = 4;
          break;
      }
      this.PostRankList();
    },
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector('#tr1');

        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + 'px';
          }
        }
      });
    },
    // 跳转到全网销量榜
    showtabs() {
      if (this.$route.query.rankKind != null) {
        this.rankKind = this.$route.query.rankKind;
      }
    },
    // 搜索
    toSearch() {
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    // 跳到达人详情
    toAnalysis(id) {
      this.$router.push({
        path: `/talent_main/tdetails/${id}/0`
      });
    },
    // 获取数据
    PostRankList(cpage) {
      let that = this;
      if (cpage) {
        this.backTop();
        this.page = cpage;
        //console.log("page", this.page);
      }
      that.loading = true;
      this.permissions = 1;
      // 榜单类型
      let type = 1;
      if (that.rankKind == '全网销量榜') {
        type = 1;
      } else if (that.rankKind == '抖音销量榜') {
        type = 2;
      }
      // 来源
      let ProFrom = '';
      switch (that.source) {
        case '全部':
          ProFrom = -1;
          break;
        case '京东':
          ProFrom = 0;
          break;
        case '淘宝':
          ProFrom = 1;
          break;
        case '抖音小店':
          ProFrom = 2;
          break;
        case '天猫':
          ProFrom = 3;
          break;
        case '苏宁':
          ProFrom = 4;
          break;
        case '考拉':
          ProFrom = 5;
          break;
      }
      // 榜单类型 1日榜 2周榜 3月榜
      let RankType = '';
      if (that.dateRank01.split('?')[0] == '日榜') {
        RankType = 1;
      } else if (that.dateRank01.split('?')[0] == '周榜') {
        RankType = 2;
      } else if (that.dateRank01.split('?')[0] == '月榜') {
        RankType = 3;
        // console.log('月榜',that.dateRank01)
      }
      that.$axios
        .post(
          '/api/product/PostDYVolumeRanks',
          {
            type: type,
            CategoryId: this.checkedDatasJoe.parentId,
            categoryIds: this.checkedDatasJoe.childIds,
            RankType: RankType,
            ProFrom: ProFrom,
            Gender: that.gender,
            Age: that.age,
            Time: that.dateRank01.split('?')[1],
            Keyword: this.trimStr(that.keyword),
            Index: that.page,
            Size: 30,
            SortValue: this.dateRank01.split('?')[0] == '月榜' ? 1 : that.sort
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel != null) {
                that.cancel();
              }
              that.cancel = c;
            })
          }
        )
        .then(res => {
          that.loading = false;
          if (res.data.code1 ==1013||res.data.code == 1003||res.data.code ==1013) {
            this.permissions = 0;
            this.dataList = [];
          } else {
            this.permissions = 1;
          }
          if (res.data.code == 0) {
            that.setTBBar();
            that.dataList = res.data.data.ranks;

            this.count = res.data.data.count;

            res.data.data.ranks.length < 30 ? (that.busy = true) : (that.busy = false);
            that.updateTime = res.data.data.timeSpan;
          }
          // that.isUpdate = res.data.data.isUpdate;
        })
        .catch(err => {});
    },
    loadMore() {
      this.PostRankList();
    },
    // 分享
    generatorImage() {
      this.isShare = true;
      setTimeout(()=>{
        var that = this;
        // console.log("时间", that.dateRank01.split("?")[1]);
        // 时间
        let date;
        switch (that.dateRank01.split('?')[0]) {
          case '日榜':
            date =
              that.dateRank01.split('?')[1].split('-')[0] +
              '年' +
              that.dateRank01.split('?')[1].split('-')[1] +
              '月' +
              that.dateRank01.split('?')[1].split('-')[2] +
              '日';
            break;
          case '周榜':
            date =
              that.dateRank01.split('?')[1].split('-')[0] +
              '年' +
              that.dateRank01.split('?')[1].split('-')[1] +
              '月' +
              that.dateRank01.split('?')[1].split('-')[2] +
              '日' +
              '至' +
              that.dateRank01.split('?')[1].split('-')[3] +
              '年' +
              that.dateRank01.split('?')[1].split('-')[4] +
              '月' +
              that.dateRank01.split('?')[1].split('-')[5] +
              '日';

            break;
          case '月榜':
            date =
              that.dateRank01.split('?')[1].split('-')[0] +
              '年' +
              that.dateRank01.split('?')[1].split('-')[1] +
              '月';
            break;
        }
        const loading = this.$loading({
          lock: true,
          text: '导出中...',
          spinner: 'el-icon-loading',
          customClass: 'customClass'
        });
        var shareContent;
        shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
        // console.log("shareContent", shareContent);
        var width = shareContent.offsetWidth; //获取dom 宽度
        var height = shareContent.offsetHeight; //获取dom 高度
        var canvas = document.createElement('canvas'); //创建一个canvas节点
        //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
        var scale = 1;
        canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
        canvas.height = height * scale * scale; //定义canvas高度 *缩放
        canvas.style.width = width + 'px';
        canvas.style.height = height + 'px';
        canvas.getContext('2d').scale(scale, scale); //获取context,设置scale
        var opts = {
          dpi: window.devicePixelRatio,
          scale: scale, // 添加的scale 参数
          useCORS: true,
          canvas: canvas, //自定义 canvas
          logging: true //日志开关
        };
        html2canvas(shareContent, opts).then(canvas => {
          let str;
          if (that.rankKind == '全网销量榜') {
            str = `《商品全网销量榜-${date}》.png`;
          } else if (that.rankKind == '抖音销量榜') {
            str = `《商品抖音销量榜-${date}》.png`;
          }
          canvas.toBlob(
            function (blob) {
              const eleLink = document.createElement('a');
              eleLink.download = str;
              eleLink.style.display = 'none';
              // 字符内容转变成blob地址
              eleLink.href = URL.createObjectURL(blob);
              // 触发点击
              document.body.appendChild(eleLink);
              eleLink.click();
              // 然后移除
              document.body.removeChild(eleLink);
            },
            'image/png',
            1
          );
          this.isShare = false;
          loading.close();
        });
      });
    },
    // 导出
    // 文字加replace 数字加\t
    export_data() {
      let that = this;
      // 时间
      let date;
      switch (that.dateRank01.split('?')[0]) {
        case '日榜':
          date =
            that.dateRank01.split('?')[1].split('-')[0] +
            '年' +
            that.dateRank01.split('?')[1].split('-')[1] +
            '月' +
            that.dateRank01.split('?')[1].split('-')[2] +
            '日';
          break;
        case '周榜':
          date =
            that.dateRank01.split('?')[1].split('-')[0] +
            '年' +
            that.dateRank01.split('?')[1].split('-')[1] +
            '月' +
            that.dateRank01.split('?')[1].split('-')[2] +
            '日' +
            '至' +
            that.dateRank01.split('?')[1].split('-')[3] +
            '年' +
            that.dateRank01.split('?')[1].split('-')[4] +
            '月' +
            that.dateRank01.split('?')[1].split('-')[5] +
            '日';
          break;
        case '月榜':
          date =
            that.dateRank01.split('?')[1].split('-')[0] +
            '年' +
            that.dateRank01.split('?')[1].split('-')[1] +
            '月';
          break;
      }
      let str = '';
      if (that.rankKind == '全网销量榜') {
        if (that.dateRank01.split('?')[0] == '日榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音日访客量,抖音日访客量增量,全网日销量,全网日销量增量\n`;
        } else if (that.dateRank01.split('?')[0] == '周榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音周访客量,抖音周访客量增量,全网周销量,全网周销量增量\n`;
        } else if (that.dateRank01.split('?')[0] == '月榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音月访客量,抖音月访客量增量,全网月销量,全网月销量增量\n`;
        }
      } else if (that.rankKind == '抖音销量榜') {
        if (that.dateRank01.split('?')[0] == '日榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音日浏览量,抖音日浏览量增量,抖音日订单量,抖音日订单量增量\n`;
        } else if (that.dateRank01.split('?')[0] == '周榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音周浏览量,抖音周浏览量增量,抖音周订单量,抖音周订单量增量\n`;
        } else if (that.dateRank01.split('?')[0] == '月榜') {
          str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,抖音月浏览量,抖音月浏览量增量,抖音月订单量,抖音月订单量增量\n`;
        }
      }
      for (let i = 0; i < that.dataList.length; i++) {
        // 浏览量增量
        let pv_incr_cent = '';
        if (that.dataList[i].pv_incr_cent == '--') {
          pv_incr_cent = '--';
        } else {
          pv_incr_cent = that.formatRate(that.dataList[i].pv_incr_cent, 1);
        }
        // 销量增量
        let sale_incr_cent = '';
        if (that.dataList[i].sale_incr_cent == '--') {
          sale_incr_cent = '--';
        } else {
          sale_incr_cent = that.formatRate(that.dataList[i].sale_incr_cent, 1);
        }

        str += `${that.dataList[i].rank},${that.proFrom(
          that.dataList[i].source_id
        )},\"${that.dataList[i].title.replace(/"/g, '""')}\",${that.dataList[i].price},${
          that.dataList[i].commission_rate
        }%,${that.format_num(that.dataList[i].author_count)},${that.format_num(
          that.dataList[i].aweme_count
        )},${that.format_num(that.dataList[i].live_count)},${that.format_num(
          that.dataList[i].pv_incr
        )},${pv_incr_cent},${that.format_num(that.dataList[i].sale_incr)},${sale_incr_cent}\n`;
      }
      var blob = new Blob([str], { type: 'text/plain;charset=utf-8' }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = object_url;
      let str_name = '';
      if (that.rankKind == '全网销量榜') {
        str_name = `《商品全网销量榜-${date}》.csv`;
      } else if (that.rankKind == '抖音销量榜') {
        str_name = `《商品抖音销量榜-${date}》.csv`;
      }
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    seeDetais(id, index) {
      this.dialog = true;
      this.active_name01 = index;
      this.video_id = id;
    },
    // 跳商品详情
    toGoodsDetails(id, tabNo) {
      let router = this.$router.resolve({
        path: `/talent_main/shop_main/${id}/${tabNo}`
      });
      window.open(router.href, '_blank');
    },
    toBuy() {
      let router = this.$router.resolve({
        path: `/talent_main/buy`
      });
      window.open(router.href, '_blank');
    },
    // 收藏商品
    addStar(id, item) {
      let that = this;
      that.$axios
        .post('/api/collection/InsertCollection', {
          CollectId: id,
          Module: 5 //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 1;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏商品
    cancelStar(id, item) {
      let that = this;
      that.$axios
        .post('/api/collection/CancelCollection', {
          CollectId: id,
          Module: 5 //模块 1达人 2视频 3音乐 4话题 5商品
        })
        .then(res => {
          if (res.data.code == 0) {
            item.isCollect = 0;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.isFixed = scrollTop > 340 ? true : false;
    }
  }
};
</script>
<style lang="less" scoped>
#SaleList {
  padding: 20px;
  margin-top: 31px;
  min-height: 100vh;
  padding-bottom: 1px;
  /* 搜索框 */
  .imgBox {
    background: url('../../../../assets/wang/talentCompare/search-nohover.png') no-repeat 10px 7px,
      #fff;
    background-size: 15px 15px;
  }
  .imgBox:hover {
    background: url('../../../../assets/wang/talentCompare/search.png') no-repeat 10px 7px, #fff;
    background-size: 15px 15px;
  }
  .updateTimewl {
    span {
      font-size: 14px;
    }
  }
  .drawText {
    font-size: 14px !important;
    color: #888 !important;
  }
  .updateTime {
    position: absolute;
    top: 32px;
    right: 20px;
    span {
      font-family: DINAlternate-Bold;
      font-size: 16px;
      color: #1779ff;
      // padding-left: 10px;
    }
  }
  // 无数据加距离上部距离
  .addTop {
    padding-top: 130px;
  }
  .addPadding {
    .title {
      margin-right: 46px !important;
    }
  }
  .search01 {
    display: inline-block;
    margin-left: 11px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .timeOptions {
    display: inline-block;
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 70px;
      height: 32px;
      border-radius: 4px;
      border: solid 1px #e5e5e5;
      font-size: 14px;
      // line-height: 30px;
      box-sizing: border-box;
      color: #555;
      text-align: center;
    }
    button:nth-of-type(2) {
      color: #67ac5b;
      border: 1px solid #67ac5b;
    }

    > button:nth-child(1) {
      margin-right: 10px;
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/fenx.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    > button:nth-child(2) {
      span {
        display: inline-block;
        width: 14px;
        height: 14px;
        background: url('../../../../assets/zhao/daoc.png') no-repeat;
        background-size: 100% 100%;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
    }
    button:nth-of-type(1):hover {
      color: #777;
      span {
        background: url('../../../../assets/zhao/fenx_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
    button:nth-of-type(2):hover {
      color: #80be76;
      border-color: #80be76;
      span {
        background: url('../../../../assets/zhao/daoc_h.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  table {
    text-align: center;
    margin-top: 14px;
    thead {
      tr {
        th {
          padding: 0 2px;
        }
        th:nth-child(1) {
          width: 9%;
        }
        th:nth-child(2) {
          width: 23%;
          text-align: left;
          padding-left: 10px;
        }
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5) {
          width: 10%;
        }
        th:nth-child(6),
        th:nth-child(7) {
          width: 10%;
        }
      }
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
    }
    tbody {
      .rankNum {
        font-size: 15px;
      }
      tr {
        height: 78px;
        td {
          padding: 0 2px;
        }
        td:nth-child(1),
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7),
        td:nth-child(8) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          color: #222222;
        }
        td:nth-child(2) {
          font-size: 14px;
          color: #222222;
          font-weight: 600;
        }

        td:nth-child(3) {
          font-size: 15px;
          color: #222;
        }
        td:nth-child(4) {
          font-size: 15px;
        }
      }
    }
    // 数量
    .numBox {
      span:nth-of-type(1) {
        font-size: 16px !important;
      }
    }
    // 商品
    .goodsBox {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      cursor: pointer;
      .leftImg {
        width: 50px;
        height: 50px;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
      }
      .img1 {
        /deep/img {
          position: absolute;
          top: 3px;
          left: 6px;
        }
      }
      .rightBox {
        flex: 1;
        margin-left: 10px;
        text-align: left;
        position: relative;
        div:nth-of-type(1) {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          text-align: left;

          img {
            width: 18px;
            height: 18px;
            margin-right: 5px;
          }
          span {
            display: block;
            text-align: left;
            font-weight: 600;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-indent: 24px;
            line-height: 20px;
            &.initState{
              display: -webkit-box;
              width: 200px;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            &.shareState{
              display: inline-block;
              max-width: 200px;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          > span:hover {
            color: #ff924b;
          }
        }
        div:nth-of-type(2) {
          text-align: left;
          margin-top: 11px;
          p {
            display: inline-block;
          }
          p:nth-of-type(1) {
            font-size: 14px;
            color: #555555;
            padding-right: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #ea1b0b;
              padding-left: 3px;
            }
          }
          p:nth-of-type(2) {
            font-size: 14px;
            color: #555555;
            // padding-left: 24px;
            span {
              font-family: DINAlternate-Bold;
              font-size: 16px;
              color: #222222;
              padding-left: 8px;
            }
          }
        }
      }
    }
    // 操作
    .optionBox {
      border-radius: 0px 4px 4px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      button {
        width: 88px;
        height: 32px;
        border: 1px solid #fd7f2c;
        border-radius: 4px;
        font-size: 14px;
        color: #fd7f2c;
        background: transparent !important;
      }
      button:hover {
        color: #ff924b;
        border: 1px solid #ff924b;
      }
    }
  }
  .filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    > button {
      width: 110px;
      height: 32px;
      background-color: #fd7f2c;
      border-radius: 4px;
      text-align: center;
      color: #fff;
      font-size: 14px;
      margin-left: 40px;
      line-height: 30px;
    }
    > p:first-child {
      font-size: 14px;
      color: #888;
      // margin-right: 20px;
      line-height: 32px;
      white-space: nowrap;
      color: #555;
    }
    #el_select {
      margin-right: 30px;
    }
  }
  .sortImg {
    width: 5px;
    height: 10px;
    vertical-align: 0;
    margin-right: 2px;
    cursor: pointer;
  }
  .paginationBox {
    width: 100%;
    background-color: #fff;
    // margin-top: 10px;
    overflow: hidden;
    padding: 20px;
    box-sizing: border-box;
    // padding-left: 1000px;
    .el-pagination {
      float: right;
    }
  }
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;
  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }
  li:nth-child(2) {
    padding-left: 10px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: -1px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
</style>
